import { css, useTheme } from "@emotion/react";
import TableCell from "@mui/material/TableCell";
import TableRow from "@mui/material/TableRow";
import type { FC } from "react";
import { createDisplayDate } from "./utils";

export interface TimelineDateRow {
	date: Date;
}

export const TimelineDateRow: FC<TimelineDateRow> = ({ date }) => {
	const theme = useTheme();

	return (
		<TableRow
			css={css`
        &:not(:first-of-type) td {
          border-top: 1px solid ${theme.palette.divider};
        }
      `}
		>
			<TableCell
				css={{
					padding: "8px 32px !important",
					background: `${theme.palette.background.paper} !important`,
					fontSize: 12,
					position: "relative",
					color: theme.palette.text.secondary,
					textTransform: "capitalize",
				}}
				title={date.toLocaleDateString()}
			>
				{createDisplayDate(date)}
			</TableCell>
		</TableRow>
	);
};
